<template>
  <div class="nav-bar">
    <router-link v-if="rollback" :to="`/${toPath}`">
      <Icon :icon-name="iconName" class="icon"/>
    </router-link>
    <slot/>
  </div>
</template>

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';

@Component
export default class NavBar extends Vue {
@Prop() rollback!:boolean;
@Prop() iconName!:string;
@Prop() toPath!:string;
}
</script>

<style lang="scss" scoped>
.nav-bar {
  padding: 4px 0;
  font-size: 1.5em;
  background-color: #fff;
  text-align: center;
  position: sticky;
  top: 0;

  .icon {
    position: absolute;
    width: 1em;
    height: 1em;
    left: 16px;
  }
}
</style>